<template>
    <div class="home-page">
        <div class="vip-list">
            <div class="vip-group">
                <div class="vip-item">
                    <div class="vip-top">
                        <img class="icon" :src="`${_oss_}images/admin/home/720bjq.png`" />
                        <div class="top-text">720漫游互动编辑器</div>
                        <div class="top-text" style="margin-left: auto">
                            作品：0
                        </div>
                        <div class="top-text" style="margin-left: 13px">
                            加精：0
                        </div>
                    </div>
                    <div class="vip-bottom">
                        <div class="vip-version">体验版</div>
                        <div class="btn">升级</div>
                    </div>
                </div>
                <div class="vip-item">
                    <div class="vip-top">
                        <img class="icon" :src="`${_oss_}images/admin/home/3dbjq.png`" />
                        <div class="top-text">3D元宇亩编辑器</div>
                        <div class="top-text" style="margin-left: auto">
                            作品：0
                        </div>
                        <div class="top-text" style="margin-left: 13px">
                            加精：0
                        </div>
                    </div>
                    <div class="vip-bottom">
                        <div class="vip-version">体验版</div>
                        <div class="btn">升级</div>
                    </div>
                </div>
                <div class="vip-item">
                    <div class="vip-top">
                        <img class="icon" :src="`${_oss_}images/admin/home/ye.png`" />
                        <div class="top-text">余额</div>
                    </div>
                    <div class="vip-bottom">
                        <div class="vip-version">0.00元</div>
                        <div class="btn">提现</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="space-list">
            <div class="space-group">
                <div class="space-item">
                    <div class="space-top">
                        <img class="icon" :src="`${_oss_}images/admin/home/kjrl.jpg`" />
                        <div class="space-text">空间容量</div>
                    </div>
                    <div class="space-bottom">
                        <div class="space-num">
                            0/<font color="#5085FB">5</font>GB
                        </div>
                        <div class="btn btn-gray">扩容</div>
                    </div>
                </div>
                <div class="space-item">
                    <div class="space-top">
                        <img class="icon" :src="`${_oss_}images/admin/home/3dzp.jpg`" />
                        <div class="space-text">3D元宇亩作品</div>
                    </div>
                    <div class="space-bottom">
                        <div class="space-num">
                            0/<font color="#5085FB">5GB</font>
                        </div>
                        <div class="btn">加购</div>
                    </div>
                </div>
                <div class="space-item">
                    <div class="space-top">
                        <img class="icon" :src="`${_oss_}images/admin/home/3dzp.jpg`" />
                        <div class="space-text">剩余存证次数</div>
                    </div>
                    <div class="space-bottom">
                        <div class="space-num">0次</div>
                        <div class="btn">加购</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="msg-box">
            <img class="msg-icon" :src="`${_oss_}images/admin/home/zztg.jpg`" />
            <div class="msg-content">这是一条消息!</div>
            <div class="msg-btn">前往消息中心></div>
        </div>

        <div class="menu-list">
            <div class="line-1">
                <div class="menu-item">
                    <img :src="`${_oss_}images/admin/home/grzy.jpg`" />
                    <div class="menu-name">个人主页</div>
                </div>
                <div class="menu-item">
                    <img :src="`${_oss_}images/admin/home/zpgl.jpg`" />
                    <div class="menu-name">作品管理</div>
                </div>
            </div>
            <div class="line-2">
                <div class="menu-item">
                    <img :src="`${_oss_}images/admin/home/yhq.jpg`" />
                    <div class="menu-name">
                        抵用券<font color="#5085FB">0</font>张
                    </div>
                </div>
                <div class="menu-item">
                    <img :src="`${_oss_}images/admin/home/sck.jpg`" />
                    <div class="menu-name">素材库</div>
                </div>
                <div class="menu-item">
                    <img :src="`${_oss_}images/admin/home/jyjl.jpg`" />
                    <div class="menu-name">交易记录</div>
                </div>
            </div>
        </div>

        <div class="ad">
            <img :src="`${_oss_}images/mobile/admin/home/bg.png`" />
        </div>

        <div class="pv-uv">
            <div class="item">
                <div class="p-title">今日浏览量（PV）</div>
                <div class="p-text">较昨天同时段：0</div>
                <div class="p-text">较昨天同时段：0</div>
            </div>
            <div class="item">
                <div class="p-title">今日独立IP</div>
                <div class="p-text">较昨天同时段：0</div>
                <div class="p-text">较昨天同时段：0</div>
            </div>
            <div class="item">
                <div class="p-title">今日用户量（UV）</div>
                <div class="p-text">较昨天同时段：0</div>
                <div class="p-text">较昨天同时段：0</div>
            </div>
        </div>
    </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 37px;
    font-size: 16px;
    background-color: #5085fb;
    color: #fff;
    border-radius: 3px;

    &-gray {
        background-color: #eef0f2;
        color: #5085fb;
    }
}

.vip-list {
    margin-bottom: 10px;

    .vip-group {
        display: flex;
        white-space: nowrap;
        overflow: auto;
        padding: 0 15px;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .vip-item {
        display: inline-flex;
        flex-direction: column;
        width: 335px;
        height: 122px;
        padding: 28px 15px 20px;
        background: linear-gradient(90deg, #61626a, #292935);
        border-radius: 2px;
        margin-right: 10px;
        flex-shrink: 0;

        .vip-top {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #fff;

            .icon {
                width: 21px;
                flex-shrink: 0;
                margin-right: 9px;
            }
        }

        .vip-bottom {
            display: flex;
            align-items: center;
            margin-top: auto;
            color: #fff;
            font-size: 25px;

            .btn {
                margin-left: auto;
            }
        }

        &:last-of-type {
            margin-right: 0;
        }
    }
}

.space-list {
    display: flex;
    margin-bottom: 10px;

    .space-group {
        display: flex;
        white-space: nowrap;
        padding: 0 15px;
        overflow: auto;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .space-item {
        display: flex;
        flex-direction: column;
        width: 335px;
        height: 122px;
        padding: 28px 15px 20px;
        background: #fff;
        border-radius: 2px;
        margin-right: 10px;
        flex-shrink: 0;

        .space-top {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #333;

            .icon {
                margin-right: 11px;
            }
        }

        .space-bottom {
            margin-top: auto;
            display: flex;
            align-items: center;
            font-size: 25px;

            .space-num {
                font-weight: bold;
            }

            .btn {
                margin-left: auto;
            }
        }

        &:last-of-type {
            margin-right: 0;
        }
    }
}

.msg-box {
    width: calc(100% - 30px);
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 15px;
    font-size: 14px;
    background-color: #fff;
    margin: 0 auto 14px;
    border-radius: 6px;

    .msg-content {
        margin-left: 10px;
        color: #333;
    }

    .msg-btn {
        margin-left: auto;
        color: #5085fb;
        cursor: pointer;
        user-select: none;
    }
}

.menu-list {
    padding: 0 15px;

    .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        color: #333;
        font-size: 14px;

        .menu-name {
            margin-top: 12px;
        }
    }

    .line-1 {
        display: flex;
        justify-content: space-between;

        .menu-item {
            width: 168px;
            height: 75px;
        }
    }

    .line-2 {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        .menu-item {
            width: 108px;
            height: 75px;
        }
    }
}

.ad {
    margin-top: 10px;

    img {
        width: 100%;
    }
}

.pv-uv {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 14px;

    .item {
        width: 168px;
        height: 75px;
        padding: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: #fff;

        .p-title {
            font-size: 14px;
        }

        .p-text {
            font-size: 12px;
            color: #999;
            margin-top: 6px;
        }

        &:nth-of-type(2n) {
            margin-right: 0;
        }
    }
}
</style>
